<div class="chat-inner-container">
  <mat-toolbar>
    <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
      <button mat-icon-button (click)="onChatSideTriggered()">
        <mat-icon>menu</mat-icon>
      </button>

      <div class="current-contact" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column">
          <span class="name" *ngIf="activeChat">{{ activeChat.name }}</span>
        </div>
      </div>

      <span fxFlex></span>

      <button mat-icon-button [matMenuTriggerFor]="chatMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </mat-toolbar>

  <div class="chat-content" fxLayout="column" fxLayoutAlign="end stretch">
    <perfect-scrollbar>
      <div class="messages-container" *ngIf="activeChat">
        <div
          class="chat-message"
          *ngFor="let message of activeChat.messages"
          [ngSwitch]="message.who"
          fxLayout="column"
          fxLayoutAlign="end start"
        >
          <div
            class="partner"
            *ngSwitchCase="'partner'"
            fxFlexAlign="start"
            fxLayout="row"
            fxLayoutAlign="start start"
          >
            <img class="avatar" [src]="activeChat.picture" />
            <span class="message mat-elevation-z1">{{ message.message }}</span>
          </div>
          <div
            class="me"
            *ngSwitchCase="'me'"
            fxFlexAlign="end"
            fxLayout="row"
            fxLayoutAlign="end start"
          >
            <span class="message mat-elevation-z1">{{ message.message }}</span>
            <img class="avatar" [src]="avatar" />
          </div>
        </div>
      </div>
    </perfect-scrollbar>

    <div class="chat-respond" fxLayout="row" fxLayoutAlign="start center">
      <mat-form-field fxFlex>
        <textarea
          matInput
          (keyup.enter)="onSendTriggered()"
          [(ngModel)]="newMessage"
          placeholder="输入您要发送的消息"
        ></textarea>
      </mat-form-field>
      <button (click)="onSendTriggered()" mat-fab color="primary">
        <mat-icon>send</mat-icon>
      </button>
    </div>
  </div>
</div>

<mat-menu #chatMenu="matMenu">
  <button mat-menu-item>
    <mat-icon> account_circle</mat-icon>
    <span> 群聊信息 </span>
  </button>
  <button mat-menu-item (click)="onNoticeTriggered()">
    <mat-icon> volume_mute</mat-icon>
    <span> 群公告 </span>
  </button>
  <mat-divider></mat-divider>
  <button mat-menu-item (click)="clearMessages(activeChat)">
    <mat-icon> clear_all</mat-icon>
    <span> 清空聊天记录 </span>
  </button>
</mat-menu>
